<div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="type == 1">
    <nz-form-item>
      <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" [dateFormat]="'yyyy-MM-dd'"
                            (event)="outDateTime($event)"></app-my-date-picker>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="type == 1">
    <nz-form-item>
      <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" [dateFormat]="'yyyy-MM-dd'"
                            (event)="outDateTime($event)"></app-my-date-picker>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div  class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"  *ngIf="type == 2">
      <nz-form-item *ngIf="type == 2">
        <nz-form-label  [nzSpan]="8">开始月份</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-month-picker
                           style="width: 100%"
                           [(ngModel)]="startDateTime"
                           [ngModelOptions]="{standalone: true}"
                           (ngModelChange)="onStartMonth($event)"
                           nzPlaceHolder="选择日期"
                           nzFormat="yyyy-MM">
          </nz-month-picker>
        </nz-form-control>
      </nz-form-item>
  </div>


  <div  class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"  *ngIf="type == 2">
    <nz-form-item *ngIf="type == 2">
      <nz-form-label  [nzSpan]="8">结束月份</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-month-picker
                         style="width: 100%"
                         [(ngModel)]="endDateTime"
                         [ngModelOptions]="{standalone: true}"
                         (ngModelChange)="onEndMonth($event)"
                         nzPlaceHolder="选择日期"
                         nzFormat="yyyy-MM">
        </nz-month-picker>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
    <nz-form-item>
      <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
      <nz-form-control [nzSpan]="16" nzErrorTip="请选择运营商">
        <nz-select  nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商" [(ngModel)]="userId">
          <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}" nzValue="{{item.id}}"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
    <nz-form-item>
      <nz-form-label [nzSpan]="8">场地</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" [(ngModel)]="merchantStoreId">
          <nz-option nzLabel="不限" nzValue="-1"></nz-option>
          <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName"
                     [nzValue]="item.id"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div class="item" nz-col nzXs="24" nzSm="12" nzMd="7" nzLg="7" nzXl="3" class="margin-bottom"
       [ngClass]="isMobile? '': 'padding-left'">
    <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search" (click)="search()">
      <i nz-icon nzType="search" nzTheme="outline"></i>搜索
    </button>
    <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search" (click)="search()">
      <i nz-icon nzType="search" nzTheme="outline"></i>搜索
    </button>
    <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">
      <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
    </button>
    <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">
      <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
    </button>
  </div>
</div>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">

  <div class="margin-bottom" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
    <button class="margin-right" (click)="dayMethod()" nz-button [nzType]="day">
      <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
      <span *ngIf="!isMobile">日交易数据</span>
    </button>

    <button nz-button [nzType]="month" (click)="monthMethod()">
      <i nz-icon nzType="rise" nzTheme="outline"></i><span *ngIf="!isMobile">月交易数据</span>
    </button>
  </div>

  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>日期</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
      <th>运营商</th>
      <th>场地</th>
      <th>营业额（元）</th>
      <th>扫码支付（元）</th>
      <th>现金收入（元）</th>
      <th>活动收入（元）</th>
      <th>抖音核销（元）</th>
      <th>美团核销（元）</th>
      <th>
        <div>预计结算金额（单位：元）</div>
        <div>
          未扣除节假日结算的万分之二结算手续费，实际到账请前往【结算查询】
        </div>
      </th>
      <th>订单笔数</th>
      <th>线上订单笔数</th>
      <th>线下订单笔数</th>
      <th>消费会员（个）</th>
      <th>新增会员（个）</th>
      <!--      <th>操作</th>-->
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data;let i = index;">
      <tr>
        <td nzEllipsis>{{data.dateStr}}</td>
        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
          <!--          <a (click)="skipAgency(data)">-->
          <div>{{ data.agencyName }}</div>
          <div class="text-sm text-grey">{{ data.agencyNo}}</div>
          <!--          </a>-->
        </td>
        <td nzEllipsis>
          <div *ngIf="data.username && data.mchStoreId > 0">
            <div>{{data.username}}</div>
            <div class="text-sm text-grey">{{data.name}}</div>
          </div>
          <span *ngIf="!data.username && data.mchStoreId > 0"><nz-tag nzColor="success">微信登录</nz-tag></span>
        </td>
        <td nzEllipsis>{{data.storeName}}</td>
        <td nzEllipsis>{{data.turnover}}</td>
        <td nzEllipsis>{{data.turnoverOnLine | emptyCheckPipe:2}}</td>
        <td nzEllipsis>{{data.turnoverOffline | emptyCheckPipe:2}}</td>
        <td nzEllipsis>{{data.activityTurnover | emptyCheckPipe:2}}</td>
        <td nzEllipsis>{{data.turnoverDouYin | emptyCheckPipe:2}}</td>
        <td nzEllipsis>{{data.turnoverMeiTuan | emptyCheckPipe:2}}</td>
        <td nzEllipsis>{{data.settlementMoney}}</td>
        <td nzEllipsis>{{data.orderCount}}</td>
        <td nzEllipsis>{{data.orderCountOnLine | emptyCheckPipe:1}}</td>
        <td nzEllipsis>{{data.orderCountOffline | emptyCheckPipe:1}}</td>
        <td nzEllipsis nzWidth="15%">{{data.memberConsumeNum}}</td>
        <td nzEllipsis nzWidth="15%">{{data.memberNewNum}}</td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
